<template>
  <view class="integral-page">
    <!-- 固定头部区域 -->
    <view class="fixed-header">
      <!-- 当前积分 -->
      <view class="jifen-info">
        <text class="current-integral-label">当前积分</text>
        <text class="current-integral">162</text>
      </view>
      <!-- 标签栏 -->
      <view class="tab-bar">
        <view 
          class="tab-item" 
          v-for="(item, index) in tabList" 
          :key="index"
          @click="switchTab(index)"
        >
          <image :src="item.icon" class="tab-icon"></image>
          <text :class="{ active: currentTab === index }">{{item.text}}</text>
        </view>
      </view>
      <!-- 会员升级提示 -->
      <view class="member-tip">
        <text class="tip-text">古茗会员已升级，本页面将保留至2025年12月31日23:59:59</text>
        <button class="view-rights-btn">查看新会员权益</button>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <view class="scroll-content">
      <view class="coupon-list">
        <view 
          class="coupon-item" 
          v-for="(coupon, index) in couponList" 
          :key="index"
        >
          <image :src="coupon.image" class="coupon-img"></image>
          <text class="coupon-title">{{coupon.title}}</text>
          <text class="coupon-tag" v-if="coupon.tag">{{coupon.tag}}</text>
          <text class="integral-need">
            {{coupon.integral}}积分
            <text class="sold-out" v-if="coupon.soldOut">已抢完</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabList: [
        { icon: "/static/images/积分明细.png", text: "积分明细" },
        { icon: "/static/images/兑换记录.png", text: "兑换记录" },
        { icon: "/static/images/积分攻略.png", text: "积分攻略" }
      ],
      couponList: [
        { 
          image: "/static/images/naicha.png", 
          title: "桃桃冰冰李赠饮券", 
          tag: "新品券", 
          integral: 2000, 
          soldOut: false 
        },
        { 
          image: "/static/coupons/buy_one_get_one.png", 
          title: "桃桃冰冰李买一送一券", 
          tag: "新品券", 
          integral: 1500, 
          soldOut: false 
        },
        { 
          image: "/static/coupons/second_half_price.png", 
          title: "桃桃冰冰李第二杯半价券", 
          tag: "新品券", 
          integral: 500, 
          soldOut: false 
        },
        { 
          image: "/static/coupons/20_percent_off.png", 
          title: "桃桃冰冰李单杯8折券", 
          tag: "新品券", 
          integral: 80, 
          soldOut: true 
        }
      ]
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
    }
  }
};
</script>

<style scoped>
.integral-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}

/* 固定头部样式 */
.fixed-header {
  position: fixed;
  top: 32px;
  left: 0;
  width: 100%;
  background-color: #fff;
  z-index: 999;
  border-bottom: 1px solid #f5f5f5;
}

.jifen-info {
  padding: 15px;
}
.current-integral-label {
  font-size: 14px;
  color: #999;
}
.current-integral {
  font-size: 28px;
  color: #f90;
  font-weight: bold;
  margin-top: 5px;
  display: block;
}

.tab-bar {
  display: flex;
  /* padding: 10px 0; */
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.tab-icon {
  width: 20px;
  height: 20px;
}
.tab-item text {
  font-size: 12px;
  color: #333;
  margin-top: 5px;
}
.tab-item.active text {
  color: #f90;
}

.member-tip {
  display: flex;
  max-width: 512px;
  height: 20px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #fff8e1;
  /* margin-top: 10px; */
}
.tip-text {
  font-size: 12px;
  color: #996633;
  line-height: 1.4;
}
.view-rights-btn {
  background-color: #fff;
  color: #996633;
  border: 1px solid #996633;
  width: 150px;
  height: 20px;
  line-height: 19px;
  font-size: 10px;
  /* padding: 5px 10px; */
  border-radius: 20px;
}

/* 可滚动内容样式 */
.scroll-content {
  margin-top: 120px; /* 撑起高度，避免被固定头部遮挡 */
  padding: 15px;
  overflow-y: scroll;
  flex: 1;
}

.coupon-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.coupon-item {
  width: 100%;
  background-color: #fdfdfd;
  border: 1px solid #f5f5f5;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
}
.coupon-img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 4px;
}
.coupon-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  display: block;
}
.coupon-tag {
  font-size: 12px;
  color: #fff;
  background-color: #ff9900;
  padding: 2px 6px;
  border-radius: 4px;
  margin-bottom: 5px;
  display: inline-block;
}
.integral-need {
  font-size: 13px;
  color: #f90;
  margin-top: 5px;
  display: block;
}
.sold-out {
  color: #999;
  margin-left: 5px;
  font-size: 12px;
  background-color: #f5f5f5;
  padding: 2px 5px;
  border-radius: 4px;
}
</style>